<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>供应商管理 - 虚拟仓系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- 引入共享导航栏 -->
    {% include 'includes/navbar.html' %}

    <div class="container mt-4">
        <h3>供应商管理</h3>
        <div class="row mb-4">
            <div class="col-md-12 text-end">
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addSupplierModal">添加供应商</button>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>供应商名称</th>
                            <th>联系人</th>
                            <th>电话</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="supplierTable"></tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 添加供应商弹窗 -->
    <div class="modal fade" id="addSupplierModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">添加供应商</h5>
                    <button class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="addSupplierForm">
                        <div class="mb-3">
                            <label>供应商名称 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="supplier_name" required>
                        </div>
                        <div class="mb-3">
                            <label>联系人 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="contact" required>
                        </div>
                        <div class="mb-3">
                            <label>电话 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="phone" required>
                        </div>
                        <div class="mb-3">
                            <label>状态</label>
                            <select class="form-select" name="is_connected">
                                <option value="1">已连接</option>
                                <option value="0">已断开</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button id="submitAdd" class="btn btn-primary">确认添加</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑供应商弹窗 -->
    <div class="modal fade" id="editSupplierModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">编辑供应商</h5>
                    <button class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="editSupplierForm">
                        <input type="hidden" name="id"> <!-- 隐藏ID用于更新 -->
                        <div class="mb-3">
                            <label>供应商名称 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="supplier_name" required>
                        </div>
                        <div class="mb-3">
                            <label>联系人 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="contact" required>
                        </div>
                        <div class="mb-3">
                            <label>电话 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="phone" required>
                        </div>
                        <div class="mb-3">
                            <label>状态</label>
                            <select class="form-select" name="is_connected">
                                <option value="1">已连接</option>
                                <option value="0">已断开</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button id="submitEdit" class="btn btn-primary">确认更新</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 加载供应商列表（复用已有API，或扩展）
        const loadSuppliers = async () => {
            const res = await fetch('/api/supplier/list');
            const suppliers = await res.json();
            const table = document.getElementById('supplierTable');
            table.innerHTML = suppliers.map(supplier => `
                <tr>
                    <td>${supplier.id}</td>
                    <td>${supplier.supplier_name}</td>
                    <td>${supplier.contact}</td>
                    <td>${supplier.phone}</td>
                    <td><span class="badge ${supplier.is_connected ? 'bg-success' : 'bg-danger'}">
                        ${supplier.is_connected ? '已连接' : '已断开'}
                    </span></td>
                    <td>
                        <button class="btn btn-sm btn-info" onclick="editSupplier(${JSON.stringify(supplier)})">编辑</button>
                        <button class="btn btn-sm btn-danger" onclick="deleteSupplier(${supplier.id})">删除</button>
                    </td>
                </tr>
            `).join('');
        };

        // 编辑供应商：填充表单数据
        const editSupplier = (supplier) => {
            const form = document.getElementById('editSupplierForm');
            form.querySelector('input[name="id"]').value = supplier.id;
            form.querySelector('input[name="supplier_name"]').value = supplier.supplier_name;
            form.querySelector('input[name="contact"]').value = supplier.contact;
            form.querySelector('input[name="phone"]').value = supplier.phone;
            form.querySelector('select[name="is_connected"]').value = supplier.is_connected;
            // 显示弹窗
            const modal = new bootstrap.Modal(document.getElementById('editSupplierModal'));
            modal.show();
        };

        // 删除供应商
        const deleteSupplier = async (id) => {
            if (!confirm('确定要删除该供应商吗？关联的虚拟库存也会被删除！')) return;
            const res = await fetch(`/api/supplier/${id}`, { method: 'DELETE' });
            const data = await res.json();
            alert(data.message);
            if (data.status === 'success') loadSuppliers();
        };

        // 提交添加供应商
        document.getElementById('submitAdd').addEventListener('click', async () => {
            const formData = Object.fromEntries(new FormData(document.getElementById('addSupplierForm')));
            const res = await fetch('/api/supplier', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(formData)
            });
            const data = await res.json();
            alert(data.message);
            if (data.status === 'success') {
                document.getElementById('addSupplierForm').reset();
                document.querySelector('#addSupplierModal .btn-close').click();
                loadSuppliers();
            }
        });

        // 提交编辑供应商
        document.getElementById('submitEdit').addEventListener('click', async () => {
            const formData = Object.fromEntries(new FormData(document.getElementById('editSupplierForm')));
            const res = await fetch(`/api/supplier/${formData.id}`, {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(formData)
            });
            const data = await res.json();
            alert(data.message);
            if (data.status === 'success') {
                document.querySelector('#editSupplierModal .btn-close').click();
                loadSuppliers();
            }
        });

        // 页面加载时加载列表
        window.onload = loadSuppliers;
    </script>
</body>
</html>